<template>
  <div class="con-top">
    <div class="box1">
      <el-button-group>
        <el-button :type="isPrimary ? 'primary' : ''" @click="isPrimary = true">
          销量
        </el-button>
        <el-button
          :type="isPrimary ? '' : 'primary'"
          @click="isPrimary = false"
        >
          销售额
        </el-button>
      </el-button-group>
      <el-select v-model="val" size="small">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div id="main" style="height: 300px;"></div>
    <p>全国销量分布图</p>
    <div id="map" style="height: 600px;"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { debounce } from 'lodash'
import { onMounted, ref, watch, onBeforeMount } from 'vue'
import { ApiStat } from './api'
import china from '@/json/map.json'

const isPrimary = ref<boolean>(true)

const val = ref<number>(4)

// 下拉选项
const options = [
  {
    value: 1,
    label: '昨天',
  },
  {
    value: 2,
    label: '今天',
  },
  {
    value: 3,
    label: '前3天',
  },
  {
    value: 4,
    label: '前7天',
  },
  {
    value: 5,
    label: '前14天',
  },
]

// 当前选择的时间
const tempData = ref<keyof SalePie>('sale_seven_days')

type IPieList = { id: number; sale: keyof SalePie; salesVolume: keyof SalePie }

const currList: IPieList[] = [
  { id: 1, sale: 'sale_yesterday', salesVolume: 'yesterday_money' },
  { id: 2, sale: 'sale_today', salesVolume: 'today_money' },
  { id: 3, sale: 'sale_three_days', salesVolume: 'three_days_money' },
  { id: 4, sale: 'sale_seven_days', salesVolume: 'seven_days_money' },
  { id: 5, sale: 'sale_fourteen_days', salesVolume: 'fourteen_days_money' },
]
// 饼图数据
const pieData = ref<SalePie[]>([])

// 全国销量地图数据
const mapData = ref<SaleMap[]>([])

// 更新饼图数据
const createPie = (val: SalePie[], myChart?: any) => {
  const data = val.map((item) => ({
    name: item.name,
    value: item[tempData.value],
  }))
  const option = {
    // 提示信息，鼠标移入
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,0,0,.6)',
      textStyle: {
        color: '#fff',
      },
      formatter: '{b}:{c}({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      height: 100,
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        data,
        left: '-30%',
        label: {
          color: 'inherit',
        },
      },
    ],
  }

  option && myChart.setOption(option)
}

// 创建销量地图
const createMap = (val: SaleMap[], mapChart?: any) => {
  // 地图绘制数据
  const data = val.map((item) => ({
    name: item.areaName,
    value: item.saleNum,
  }))
  console.log(data)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>销量：{c}',
      backgroundColor: 'rgba(0,0,0,.6)',
      textStyle: {
        color: '#fff',
      },
    },

    visualMap: {
      min: 0,
      max: 1000000,
      realtime: true,
      calculable: true,
      inRange: {
        color: ['#fff', '#fe531a', '#a92c28'],
      },
    },
    series: [
      {
        type: 'map',
        map: 'china',
        data,
      },
    ],
    nameMap: {
      Feature: '广东省',
    },
  }

  option && mapChart.setOption(option)
}

onMounted(() => {
  var chartDom = document.getElementById('main')!
  var myChart = echarts.init(chartDom)

  var mapDom = document.getElementById('map')!
  var mapChart = echarts.init(mapDom)

  // 地图需要先注册json数据
  echarts.registerMap('china', china as any)

  // 发送请求数据
  ApiStat().then((res) => {
    pieData.value = res.data.salePie
    mapData.value = res.data.saleMap

    createPie(pieData.value, myChart)
    createMap(mapData.value, mapChart)
  })

  // 监听数据变化
  watch([() => val.value, () => isPrimary.value], () => {
    currList.forEach((item) => {
      if (item.id === val.value) {
        if (isPrimary.value) {
          tempData.value = item.sale
        } else {
          tempData.value = item.salesVolume
        }
      }
    })
    createPie(pieData.value, myChart)
  })

  window.onresize = debounce(() => {
    myChart.resize()
    mapChart.resize()
  }, 300)
})

onBeforeMount(() => {
  window.onresize = null
})
</script>

<style lang="less" scoped>
.box1 {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
p {
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #ddd;
}
</style>
